<template>
  <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" :append-to-body="true" width="800px" title="环节设置">
    <el-form :model="taskNode">
      <div class="el-table el-table--fit el-table--border">
        <div class="el-table__body-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
            <tbody>
              <tr>
                <td class="tdlbl tdw17">环节名称</td>
                <td class="tdcont tdw83">
                  <ValidationProvider ref="ValidationProvider" v-slot="{ errors }" name="环节名称" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-input v-model="taskNode.name" :disabled="taskNode.startNode" placeholder="请输入环节名称" />
                    </el-tooltip>
                  </ValidationProvider>
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17"><span class="required">*</span>任务类型</td>
                <td class="tdcont tdw83">
                  <validation-provider ref="ValidationProvider" v-slot="{ errors }" name="任务类型" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-select v-model="taskNode.todoMode" :disabled="taskNode.startNode" placeholder="请选择任务类型" style="width:100%">
                        <el-option :value="0" label="单人">单人</el-option>
                        <el-option :value="1" label="多人并行">多人并行</el-option>
                        <el-option :value="2" label="多人会签">多人会签</el-option>
                        <el-option :value="3" label="多人串行">多人串行</el-option>
                        <el-option :value="4" label="多人竞争">多人竞争</el-option>
                        <el-option :value="5" label="多人阅文">多人阅文</el-option>
                      </el-select>
                    </el-tooltip>
                  </validation-provider>
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17"><span class="required">*</span>处理人选择方式</td>
                <td class="tdcont tdw83">
                  <validation-provider ref="ValidationProvider" v-slot="{ errors }" name="处理人选择方式" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-select v-model="taskNode.selectType" :disabled="taskNode.startNode" placeholder="处理人选择方式" style="width:100%" @change="selectTypeChanged()">
                        <el-option :value="0" label="指定人员">指定人员</el-option>
                        <el-option :value="1" label="指定部门">指定部门</el-option>
                        <el-option :value="2" label="指定群组">指定群组</el-option>
                        <el-option :value="3" label="指定岗位">指定岗位</el-option>
                      </el-select>
                    </el-tooltip>
                  </validation-provider>
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17">环节可选处理人</td>
                <td class="tdcont tdw83">
                  <div v-if="!forceUpdate">
                    <el-input v-if="taskNode.selectType==0" v-model="taskNode.userNames" v-select-dialog="'staff'" :disabled="taskNode.startNode" name="userNames" multiple="true" placeholder="请选择环节处理人" />
                    <el-input v-if="taskNode.selectType==1" v-model="taskNode.orgNames" v-select-dialog="'suborg'" org-level="2" :disabled="taskNode.startNode" name="orgNames" multiple="true" placeholder="请选择环节处理人部门" />
                    <el-input v-if="taskNode.selectType==2" v-model="taskNode.workgroupNames" v-select-dialog="'workgroup'" :disabled="taskNode.startNode" name="workgroupNames" multiple="true" placeholder="请选择环节处理人工作群组" />
                    <el-input v-if="taskNode.selectType==3" v-model="taskNode.jopPositionNames" v-select-dialog="'jobPosition'" :disabled="taskNode.startNode" name="jopPositionNames" multiple="true" placeholder="请选择环节处理人工作岗位" />
                  </div>
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17"><span class="required">*</span>编辑权限</td>
                <td class="tdcont tdw83">
                  <ValidationProvider ref="ValidationProvider" v-slot="{ errors }" name="编辑权限" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-radio-group v-model="taskNode.canEdit" :disabled="taskNode.startNode" placeholder="请设置编辑权限" style="width:100%">
                        <el-radio v-for="(option,optKey) in canEditOptions" :key="optKey" :label="option.value">{{ option.text }}</el-radio>
                      </el-radio-group>
                    </el-tooltip>
                  </ValidationProvider>
                </td>
              </tr>
              <tr>
                <td class="tdlbl tdw17"><span class="required">*</span>意见标签</td>
                <td class="tdcont tdw83">
                  <validation-provider ref="ValidationProvider" v-slot="{ errors }" name="处理意见" rules="required">
                    <el-tooltip :disabled="errors===undefined||errors[0]===undefined" :content="errors===undefined?'':errors[0]" :class="{'invalid-field':errors!==undefined&&errors[0]!==undefined}" popper-class="error-popper-class" placement="right-start" effect="dark">
                      <el-select v-model="taskNode.ideaLable" name="ideaLable" placeholder="请选择意见标签" style="width:100%">
                        <el-option v-for="(option,optKey) in ideaLableOptions" :key="optKey" :label="option.text" :value="option.value" />
                      </el-select>
                    </el-tooltip>
                  </validation-provider>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button plain icon="el-icon-close" @click="closeDialog">取 消</el-button>
      <el-button type="primary" icon="el-icon-check" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
    name: 'WfTaskNode',
    components: {

    },
    props: {
        taskNode: { type: Object, default: function() { return { } } },
        ideaLables: { type: String, default: '' }
    },
    data() {
        return {
            forceUpdate: false,
            dialogFormVisible: true,
            canEditOptions: [
                { value: 1, text: '是' },
                { value: 0, text: '否' }
            ],
            curNodeName: ''
        }
    },
    computed: {
        ideaLableOptions() {
            const ideaLablelist = []
            this.ideaLables.split(',').forEach(lable => {
                ideaLablelist.push({ value: lable, text: lable })
            })
            ideaLablelist.push({ value: '无', text: '无' })
            return ideaLablelist
        }
    },
    watch: {

    },
    created() {
        if (this.taskNode.selectType === undefined) {
            this.taskNode.selectType = 0
        }
        if (this.taskNode.status === 1) {
            this.curNodeName = this.taskNode.name
        }
    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {
        // 选择人员
        onSelectStaffCompleted(selectedNodes, attr) {
            let selected = ''
            selectedNodes.forEach(function(node) {
                if (selected !== '') selected += '、'
                selected += node.name + '/' + node.account
            })

            this.taskNode.users = selectedNodes
            this.$set(this.taskNode, 'userNames', selected)
            this.$set(this.taskNode, 'orgNames', '')
            this.$set(this.taskNode, 'workgroupNames', '')
            this.$set(this.taskNode, 'jobPositionNames', '')
        },
        // 选择部门、科室、班组
        onSelectSuborgCompleted(selectedNodes, attr) {
            selectedNodes = JSON.parse(JSON.stringify(selectedNodes))

            let selected = ''
            selectedNodes.forEach(function(node) {
                if (selected !== '') selected += '、'
                selected += node.name

                node.orgId = node.id
                delete node.id
            })

            this.taskNode.users = selectedNodes

            this.$set(this.taskNode, 'userNames', '')
            this.$set(this.taskNode, 'orgNames', selected)
            this.$set(this.taskNode, 'workgroupNames', '')
            this.$set(this.taskNode, 'jobPositionNames', '')
        },
        // 选择工作群组
        onSelectWorkgroupCompleted(selectedNodes, attr) {
            selectedNodes = JSON.parse(JSON.stringify(selectedNodes))

            let selected = ''
            selectedNodes.forEach(function(node) {
                if (selected !== '') selected += '、'
                selected += node.name

                node.workgroupId = node.id
                delete node.id
            })
            this.taskNode.users = selectedNodes

            this.$set(this.taskNode, 'userNames', '')
            this.$set(this.taskNode, 'orgNames', '')
            this.$set(this.taskNode, 'workgroupNames', selected)
            this.$set(this.taskNode, 'jobPositionNames', '')
        },
        // 选择工作岗位
        onSelectJobPositionCompleted(selectedNodes, attr) {
            selectedNodes = JSON.parse(JSON.stringify(selectedNodes))

            let selected = ''
            selectedNodes.forEach(function(node) {
                if (selected !== '') selected += '、'
                selected += node.name

                node.jobPositionId = node.id
                delete node.id
            })

            this.taskNode.users = selectedNodes

            this.$set(this.taskNode, 'userNames', '')
            this.$set(this.taskNode, 'orgNames', '')
            this.$set(this.taskNode, 'workgroupNames', '')
            this.$set(this.taskNode, 'jobPositionNames', selected)
        },
        submitForm() {
            this.formValidate(() => {
                const udmNode = JSON.parse(JSON.stringify(this.taskNode))
                udmNode.tmLmtType = '9'
                udmNode.type = 1
                if (udmNode.todoMode === 5) {
                    udmNode.type = 3
                }
                const wfdNodeList = this.$vnode.context.wfInstance.passenger.wfdNodeList

                if (wfdNodeList) {
                    wfdNodeList.forEach(node => {
                        if (node.processType === udmNode.todoMode && node.nodeType === udmNode.type) {
                            udmNode.id = node.id
                        }
                    })
                }
                if (udmNode.status !== 1) {
                    udmNode.status = 1
                    udmNode.uuid = this.uuid()
                    this.$vnode.context.wfInstance.udmNodes.push(udmNode)
                } else {
                    this.$vnode.context.wfInstance.udmNodes.forEach((wfnode, index) => {
                        if (wfnode.uuid === udmNode.uuid) {
                            this.$vnode.context.wfInstance.udmNodes.splice(index, 1, udmNode)

                            if (this.$vnode.context.curTN.tnNodeName === this.curNodeName) {
                                this.$vnode.context.curTN.tnNodeName = udmNode.name
                                this.$vnode.context.curTN.tnCanEdit = udmNode.canEdit

                                if (udmNode.todoMode === 5) {
                                    this.$vnode.context.curTN.tnTaskType = 3
                                } else {
                                    this.$vnode.context.curTN.tnTaskType = 1
                                }
                                this.$vnode.context.curTN.tnToDoMode = udmNode.todoMode

                                if (udmNode.ideaLable === '无') {
                                    this.$vnode.context.curTN.tnIdeaLabelID = ''
                                    this.$vnode.context.curTN.tnIdeaLabelName = ''
                                } else {
                                    this.$vnode.context.curTN.tnIdeaLabelID = 'udm_' + udmNode.ideaLable
                                    this.$vnode.context.curTN.tnIdeaLabelName = udmNode.ideaLable
                                    this.$vnode.context.curTN.tnIdeaIsMust = 1
                                }
                            }
                        }
                    })
                }
                this.closeDialog()
            })
        },
        closeDialog() {
            this.$vnode.context.udmNode = null
        },
        uuid() {
            const r = []
            const e = '0123456789abcdef'
            for (let t = 0; t < 36; t++) {
                r[t] = e.substr(Math.floor(16 * Math.random()), 1)
            }
            r[14] = '4'
            r[19] = e.substr(3 & r[19] | 8, 1)
            r[8] = r[13] = r[18] = r[23] = ''
            return r.join('')
        },
        selectTypeChanged() {
            this.forceUpdate = true
            this.$nextTick(() => {
                this.forceUpdate = false
            })
            this.$forceUpdate()
        }
    }
}
</script>

<style scoped lang="scss">

</style>
